<!--
 * @Description:
 * @Author: hui
 * @Date: 2022-02-18 10:58:56
 * @LastEditTime: 2022-03-31 09:28:26
-->
<template>
	<div class="panel">
		<div class="title">能碳管理总览</div>
    <div class="panel-body">
      <div class="panel-item fuwu">
        <h3>服务总览</h3>
        <div class="chart" id="main"></div>
      </div>
      <div class="panel-item nenghao">
        <h3>能耗总览</h3>
        <div class="list">
          <div v-for="(item, index) in props.nengList" :key="index" class="item">
            <div class="img-icon" :style="{'background-color': item.iconcolor}">
              <img class="icon" :src="item.img" />
            </div>
            <div class="content">
              <h4>{{ item.name }}</h4>
              <div class="value" :class="{'up': item.classname === 'up', 'down': item.classname === 'down'}">
                <span>{{ item.value }}</span>
                <span v-if="item.unit">{{ item.unit }}</span>
              </div>
            </div>

          </div>
        </div>
      </div>
      <div class="panel-item tanpaifang">
        <h3>碳排放总览</h3>
        <div class="list">
          <div v-for="(item, index) in props.tanpaifangList" :key="index" class="item">
            <div class="img-icon" :style="{'background-color': item.iconcolor}">
              <img class="icon" :src="item.img" />
            </div>
            <div class="content">
              <h4>{{ item.name }}</h4>
              <div class="value">
                <span>{{ item.value }}</span>
                <span v-if="item.unit">{{ item.unit }}</span>
              </div>
            </div>

          </div>
        </div>
      </div>
    </div>
	</div>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue';
import * as echarts from 'echarts';
import icon_1 from '@/assets/images/worktable/icon_1.png';
import icon_2 from '@/assets/images/worktable/icon_2.png';
import icon_3 from '@/assets/images/worktable/icon_3.png';
import icon_4 from '@/assets/images/worktable/icon_4.png';
import icon_5 from '@/assets/images/worktable/icon_5.png';
import icon_6 from '@/assets/images/worktable/icon_6.png';
import icon_7 from '@/assets/images/worktable/icon_7.png';
import icon_8 from '@/assets/images/worktable/icon_8.png';
type EChartsOption = echarts.EChartsOption;
const nengList = ref([]) as any
const tanpaifangList = ref([]) as any
const chartDom = ref()
let option: EChartsOption
const evaluationChart = ref<HTMLElement>()

let chartHeight: number = 500
let chartWidth: number = 0
const props = defineProps(['nengList', 'tanpaifangList', 'chartData'])
// const props: Readonly<{
//     nengList?: any;
//     tanpaifangList?: any;
//     chartData?: any;
// }>
// let appInfo = ref({})
// // const loginUrl = process.env.BASE_URL_LP
// // const loginUrlLocal = import.meta.env.VITE_LP_URL;
// // const lpUrl = loginUrl?loginUrl:loginUrlLocal
// // console.log(`loginUrl `+loginUrl)
// // console.log(`loginUrlLocal `+loginUrlLocal)
// //authorityApp 授权登录应用(1:绿评 2:绿金)
// nengList.value = [
//   {
//     id: 1,
//     name: "计划能耗",
//     value: '18.65万',
//     unit: 'kWh',
//     img: icon_1,
//     iconcolor: '#DAF7F0',
//     classname: ''
//   },
//   {
//     id: 2,
//     name: "实际能耗",
//     value: '18.65万',
//     unit: 'kWh',
//     img: icon_2,
//     iconcolor: '#D5EAFF',
//     classname: ''
//   },
//   {
//     id: 3,
//     name: "较上月",
//     value: '+50.32%',
//     unit: '',
//     img: icon_3,
//     iconcolor: '#E7E6FE',
//     classname: 'up'
//   },
//   {
//     id: 4,
//     name: "较去年同期",
//     value: '-20.06%',
//     unit: '',
//     img: icon_4,
//     iconcolor: '#FFF5CA',
//     classname: 'down'
//   }
// ]
// tanpaifangList.value = [
//   {
//     id: 1,
//     name: "已排放总量",
//     value: '42,450',
//     unit: '',
//     img: icon_5,
//     iconcolor: '#FFF5CA',
//     classname: ''
//   },
//   {
//     id: 2,
//     name: "已耗能总量",
//     value: '42,450',
//     unit: '',
//     img: icon_6,
//     iconcolor: '#FFE9D5',
//     classname: ''
//   },
//   {
//     id: 3,
//     name: "预计排放总量",
//     value: '42,450',
//     unit: '',
//     img: icon_7,
//     iconcolor: '#DAF7F0',
//     classname: ''
//   },
//   {
//     id: 4,
//     name: "预计耗能总量",
//     value: '42,450',
//     unit: '',
//     img: icon_8,
//     iconcolor: '#FFF5CA',
//     classname: ''
//   }
// ]

watch(
  () => props.chartData,
  (newValue, oldValue) => {
    // 注意：`newValue` 此处和 `oldValue` 是相等的
    // *除非* state.someObject 被整个替换了
    initChart(props.chartData)
  },
  { deep: true }
)

onMounted(() => {
    initChart(props.chartData)
})
const initChart = (data: any) => {
  // const data = getData()
  // const data = {}
  chartDom.value = document.getElementById('main');
  const myChart = echarts.init(chartDom.value);
  // myChart.on('click', handleClick)  // 左击
  option = {
    title: {
      show: false,
      text: '85',
      left: 'center',
      top: 62,
      textStyle: {
        color: '#242F57'
      }
    },
    tooltip: {
      show: false,
      trigger: 'item'
    },
    // visualMap: {
    //   show: false,
    //   min: 80,
    //   max: 600,
    //   inRange: {
    //     colorLightness: [0, 1]
    //   }
    // },
    legend: {
      orient: 'vertical',
      bottom: '3%',
      itemWidth: 16,
      itemHeight: 16,
      data: ['服务企业', '监控企业'],
      textStyle: {
        rich: {
          a: {
            width: 100,
            color: '#636D96'
          },
          b: {
            width: 40,
            color: '#97A0C3'
          },
          c: {
            width: 60,
            color: '#97A0C3'
          }
        }
      },
      formatter: function(name) {
        const nameTarget = getNameTarget(name)
        // return '{a|' + name + '}' + '{b|' + nameTarget.value + '}' + '{c|台}'
        return '{a|' + name + '}' + '{b|' + nameTarget.value + '}' + '{c|' + nameTarget.value2 + '}'
      }
    },
    series: [
      {
        name: '服务总览',
        type: 'pie',
        // radius: '55%',
        radius: ['25%', '55%'],
        center: ['50%', '35%'],
        data: [
          { value: props.chartData.serviceNum, name: '服务企业', itemStyle: {color: '#0080FF'} },
          { value: props.chartData.monitorNum, name: '监控企业', itemStyle: {color: '#1FD0A3'} }
        ],
        roseType: 'radius', // 是否展示成南丁格尔图
        label: {
          show: false,
          color: 'rgba(255, 255, 255, 0.3)'
        },
        labelLine: {
          show: false,
          lineStyle: {
            color: 'rgba(255, 255, 255, 0.3)'
          },
          smooth: 0.2,
          length: 10,
          length2: 20
        },
        itemStyle: {
          // color: ['#c23531', '#ffffff'],
          shadowBlur: 200,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        },
        animationType: 'scale', // 初始动画效果 缩放效果
        animationEasing: 'elasticOut', // 初始动画的缓动效果
        animationDelay: function (idx) { // 初始动画的延迟
          return Math.random() * 100;
        }
      },
      {
        name: '数据总数',
        type: 'pie',
        radius: ['0%', '0%'],
        center: ['50%', '35%'],
        itemStyle: { // 防止鼠标悬浮到标签时出现放大的点
          color: 'transparent'
        },
        label: {
          position: 'inside',
          // formatter: `{data|{c}}\n{serie|{a}}`,
          formatter: `{data|{c}}`,
          rich: {
            data: {
              fontWeight: 'bold',
              fontSize: 20,
              color: `#242F57`,
              // lineHeight: 68,
              textBorderColor: `transparent`,
              textBorderWidth: 0
            },
            // serie: {
            //   fontSize: 24,
            //   color: `#acbac6`,
            //   lineHeight: 28,
            //   textBorderColor: `transparent`,
            //   textBorderWidth: 0
            // }
          }
        },
        labelLine: {
          show: false
        },
        data: [ // 计算表格数据value总和
          85
        ]
      }
    ]
  }
    myChart.setOption(option)
    // // 计算需要展示的高度和宽度
    // var allNode=0;
    // var nodes=myChart._chartsViews[0]._data._graphicEls;
    // for(var i=0,count =nodes.length;i<count;i++) {
    //   var node=nodes[i];
    //   if(node===undefined)
    //       continue;
    //   allNode++;
    // }
    // getTreeDepth(data)
    // chartHeight = allNode * 75
    // chartWidth = level > 2 ? (level-2) * 440 + 580 : 580
    // myChart.resize({height: chartHeight,width: chartWidth})//设置图表动态高度&宽度
}
// 匹配数据并返回
const getNameTarget = (name: string) => {
  let target = {
    value: '',
    value2: ''
  }
  if (name === '服务企业') {
    target = {
      value: props.chartData.serviceNum,
      value2: props.chartData.serviceProportion
    }
  } else if (name === '监控企业') {
    target = {
      value: props.chartData.monitorNum,
      value2: props.chartData.monitorProportion
    }
  }
  return target
}

</script>

<style lang="scss" scoped>
.panel {
  height: 359px;
  padding: 0 20px;
  background: #FFFFFF;
  box-shadow: 0px 2px 4px 0px rgba(28,41,90,0.04);
  border-radius: 10px;
  // border: 1px solid #EAEDF7;
  .title {
    padding: 20px 0;
    font-size: 26px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #242F57;
    line-height: 1em;
  }
  .panel-body {
    display: flex;
    .panel-item {
      &:nth-child(1) {
        width: 30%;
      }
      &:nth-child(2) {
        width: 35%;
      }
      &:nth-child(3) {
        width: 35%;
      }
      .chart {
        margin-top: 5%;
        margin-right: 5%;
        height: 220px;
        background: #FFFFFF;
        box-shadow: 0px 2px 4px 0px rgba(28,41,90,0.04);
        border-radius: 10px;
        border: 1px solid #EAEDF7;
      }
      h3 {
        font-size: 18px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #636E95;
      }
      .list {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        .item {
          display: flex;
          align-items: center;
          width: 45%;
          box-sizing: border-box;
          margin-right: 5%;
          margin-top: 5%;
          height: 96px;
          background: #FFFFFF;
          border-radius: 10px;
          border: 1px solid #EAEDF7;
          .img-icon {
            width: 48px;
            height: 48px;
            background: #DAF7F0;
            border-radius: 10px;
            margin: 0 10px 0 20px;
            text-align: center;
            .icon {
              width: 24px;
              height: 24px;
              margin-top: 12px;
            }
          }
          .content {
            h4 {
              font-size: 14px;
              font-family: PingFangSC-Semibold, PingFang SC;
              font-weight: 600;
              color: #97A0C3;
              line-height: 24px;
            }
            .value {
              font-size: 18px;
              font-family: PingFangSC-Semibold, PingFang SC;
              font-weight: 600;
              color: #242F57;
              line-height: 24px;
              &.up {
                color: #04B78A;
              }
              &.down {
                color: #FA5087;
              }
            }
          }
        }
        
      }
    }
  }
}
</style>
